<template>
	<view class="mobile-page" :style="my_style">
		<view class="font-28 p-l-30 p-r-30 p-t-30" style="color: #909090;">为了保证您的账户安全，请验证身份，验证成功进入下一步操作。</view>
		<!-- 表单 -->
		<view class="form font-32">
			<view class="cell">
				<text class="label">手机号</text>
				<input type="number" :disabled="scene !== 'change_bind' && scene !== 'reset_pwd'" maxlength="11" v-model="mobile"
					placeholder="请输入手机号" />
			</view>
			<view class="cell flex-between">
				<view class="flex-row">
					<text class="label">图片验证</text>
					<input class="flex-1" maxlength="4" type="text" v-model="imgcode" placeholder="输入图片验证码" />
				</view>
				<image @click="imgCode" class="img-code" :src="img_url" mode=""></image>
			</view>
			<view class="cell flex-between u-m-b-26">
				<view class="flex-row">
					<text class="label">验证码</text>
					<input type="number" maxlength="6" v-model="verify_code" placeholder="请输入短信验证码" />
				</view>
				<text class="font-28" style="color: #FB2D19;" @click="sendCaptcha(mobile, scene, imgcode)">{{
          btnCodeText
        }}</text>
			</view>
		</view>
		<view class="p-24">
			<view class="primary-btn flex-center m-b-12"
				@click="scene === 'change_bind' && type !== 'login_paw' ? changeMobile() : verifyMobile()">
				{{ btn_text }}
			</view>
		</view>
		<!-- 注销弹窗 -->
		<u-popup v-model="show_destory" :closeable="true" mode="center" border-radius="16" width="560" height="590">
			<view class="destory-pop flex-between fdc">
				<view class="font-32 font-weight-500 lh-44">重要提醒</view>
				<view class="u-p-40 u-text-center light-color">注销账号会清空所有信息和数据，你真的要注销吗？确认注销请输入您的名称</view>
				<input type="text" v-model="nickname" maxlength="20" placeholder="输入您的名称" />
				<view class="footer-primary-btn flex-center" @click="userDestroy">确认注销</view>
			</view>
		</u-popup>
	</view>
</template>
<script>
	let BASE_CODE = `${process.env.VUE_APP_URL}/imgcode`
	import mixin from '@/mixin/captcha'
	export default {
		mixins: [mixin],
		data() {
			return {
				active: 'login',
				is_agree: false,
				verify_code: '', // 验证码
				imgcode: '', // 图形验证码
				confirm_password: '', // 确认密码
				mobile: '', // 用户手机号
				password: '', // 密码
				type: '', // verify_mobile 验证 change_bind 换绑
				log_type: '', //忘记密码
				img_url: '',
				scene: 'verify_mobile',
				nickname: '',
				key: '',
				show_destory: false, // 注销弹窗
				user_info: {},
			}
		},
		computed: {
			btn_text() {
				return this.scene === 'change_bind' && this.type !== 'login_paw' ? '确认新绑定' : '下一步'
			},
		},
		onLoad(options) {
			this.type = options.type
			this.user_info = uni.getStorageSync('user_info') || {}
			this.key = options.key || ''
			this.scene = options.scene || options.type || ''
			uni.setNavigationBarTitle({
				title: this.scene === 'change_bind' && this.type !== 'login_paw' ? '换绑手机号' : '验证手机号',
			})
			this.imgCode()
			this.getMobile()
		},
		methods: {
			getMobile() {
				if (this.scene === 'verify_mobile' || this.scene === 'destory_account') {
					this.mobile = this.user_info.mobile
				}
			},
			async imgCode() {
				this.img_url = `${BASE_CODE}?t=${this.randomStr(10)}`
			},
			// 生成随机验证码
			getRandomImgCode() {
				this.img_url = `${BASE_CODE}?t=${this.randomStr(10)}`
			},
			// 用户-验证手机号
			async verifyMobile() {
				let api = 'verifyMobile'
				if (this.type === "login_paw") api = "verifyMobileH5"
				let params = {
					verify_code: this.verify_code,
					mobile: this.mobile,
					scene:this.scene
				}
				if (!this.verify_code) {
					this.$u.toast('请输入短信验证码')
					return
				}
				if (this.type === 'destory_account') {
					this.show_destory = true
					return
				}
				const res = await this.$api.common.user(api, params)
				if (res.code === 200) {
					const {
						key
					} = res.data
					if (this.type === 'reset_pwd') {
						this.replaceJump(`/views/user/setting/pay_password?key=${key}`)
					} else if (this.type === 'login_paw') {
						uni.setStorageSync('login_paw_m', this.mobile)
						this.replaceJump('/pages/user/set-paw')
					} else {
						this.replaceJump(
							`/pages/user/mobile?type=change_bind&scene=change_bind&key=${key}`
						)
					}
				}
			},
			// 用户-换绑手机号
			async changeMobile() {
				const {
					mobile,
					verify_code,
					key
				} = this
				let params = {
					mobile,
					verify_code,
					key,
				}
				const res = await this.$api.common.user('changeMobile', params)
				if (res.code === 200) {
					uni.showToast({
						icon: 'none',
						title: '换绑手机号成功',
					})
					setTimeout(() => {
						this.goBack()
					}, 2000)
					// let info = {
					//   title: '换绑手机号',
					//   tip: '换绑手机号成功',
					//   btn: '返回设置',
					//   link: '/views/user/setting/index',
					// }
					// this.successGo(`?info=${encodeURIComponent(JSON.stringify(info))}`)
				}
			},
			// 用户注销
			async userDestroy() {
				const {
					verify_code,
					nickname
				} = this
				let params = {
					verify_code,
					nickname,
				}
				const res = await this.$api.common.user('userDestroy', params)
				if (res.code === 200) {
					uni.removeStorageSync('access_token')
					uni.removeStorageSync('member_id')
					this.successBack('注销成功', 2)
				}
			},
		},
	}
</script>
<style lang="scss" scoped>
	.mobile-page {
		min-height: 100vh;
		background-color: #fff;

		.bg-box {
			width: 100%;
			background-size: 100% 100%;
		}

		.tab-item {
			width: 50%;
			height: 100rpx;
			line-height: 100rpx;
			color: #666;
		}

		.form {
			padding: 28rpx 24rpx 0;

			input {
				height: 100rpx;
				border-bottom: 1px solid #ececec;
			}

			.cell {
				display: flex;
				height: 100rpx;
				padding: 28rpx 0;
				box-sizing: border-box;
				// background-color: #fff;
				border-bottom: 1px solid #ececec;
				flex-direction: row;
				align-items: center;

				input {
					border-bottom: none;
				}

				.label {
					width: 150rpx;
					display: flex;
					align-items: center;
				}

				.img-code {
					width: 170rpx;
					height: 75rpx;
				}
			}
		}

		.primary-btn {
			width: 100%;
			height: 88rpx;
			font-size: 34rpx;
			color: #fff;
			background: var(--color);
			border-radius: 100rpx;
		}

		// 注销弹窗
		.destory-pop {
			height: 100%;
			padding: 50rpx 30rpx;

			input {
				width: 100%;
				height: 88rpx;
				padding: 0 24rpx;
				background: #fff;
				border: 2rpx solid #999;
				border-radius: 8rpx;
			}
		}
	}
</style>
